<template>
 <div class="adbuy">
     <div class="formcard shadow">
         <el-form
          label-position="right" 
          label-width="130px" 
          :model="formLabelAlign"
          size="mini"          
          style="width:450px; margin-top:15px;"
          >
          <el-form-item :label="$t('adbuy.realname')">
            <el-input
             v-model="mallRealName"
              :disabled="true"
             ></el-input>
          </el-form-item>
          <el-form-item :label="$t('adbuy.chargecoins')" >
            <span class="text">{{$t('adbuy.explain')}}</span><el-button type="text">{{$t('adbuy.checkbtn')}}</el-button>
          </el-form-item>
         <el-form-item :label="$t('adbuy.payamount')">
            <el-input :placeholder="'1000'+$t('money[0]')+'/5000'+$t('money[1]')+$t('adbuy.mini')" v-model="formLabelAlign.amount"></el-input>
          </el-form-item>
          <el-form-item :label="$t('adbuy.Paymentcurrency')">
            <el-select v-model="formLabelAlign.currency" :placeholder="$t('placedefaut')">
              <el-option
                v-for="item in currencyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
         <el-form-item :label="$t('adbuy.bankAddress')">
            <el-select v-model="formLabelAlign.bankType" :placeholder="$t('placedefaut')">
              <el-option
                v-for="item in [{
                  value:1,
                  label:$t('adbuy.banklocal[0]')
                },
                {
                  value:2,
                  label:$t('adbuy.banklocal[1]')
                },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

            <el-form-item :label="$t('adbuy.PaybankOrderNo')">
            <el-input :placeholder="$t('notnes')" v-model="formLabelAlign.bankOrderNo"></el-input>
          </el-form-item>
           <el-form-item :label="$t('adbuy.Paybankinfo')">
               <ul>
            <li>{{$t('adbuy.accountname')}}：{{useingBankCardinfo.accountName}}<span><el-button @click="openSwitch" class="changeCard" type="text">{{$t('adbuy.switchCard')}}</el-button></span></li>
            <li>{{$t('adbuy.payaccount')}}：{{useingBankCardinfo.bankNumber}}</li>
            <li>{{$t('adbuy.paybank')}}SWIFT code：{{useingBankCardinfo.bankCode}}</li>
            <li>{{$t('adbuy.bankname')}}：{{useingBankCardinfo.bankName}}</li>
            </ul>
            
          </el-form-item>
          
            <el-form-item >
        <el-button  @click="resetForm">{{$t('adbuy.reset')}}</el-button>
       <el-button :disabled="requestStatus" @click="goRequest" type="primary" >{{$t('adbuy.confrim')}}</el-button>
          </el-form-item>
        </el-form>
     </div>
     <div class="adBuyData shadow">
      <el-table
      :data="tableData"
      border
      style="width: 100%;font-size:12px;"
      class="adbuyTable"
      header-cell-class-name="titlecell"
      fit
      >
      <el-table-column
        prop="orderNo"
        :label="$t('table.orNumber')"
        width="250"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        :label="$t('table.request')"
        >
      </el-table-column>
      <el-table-column
        prop="erbanNO"
        label="higoID">
      </el-table-column>
      <el-table-column
        prop="userNick"
        :label="'higo'+$t('table.nick')">
      </el-table-column>
        <el-table-column
        prop="realName"
        :label="$t('table.name')">
      </el-table-column>

      <el-table-column
        prop="bankName"
        :label="$t('table.transferBank')">
      </el-table-column>
            <el-table-column
        prop="amount"
        :label="$t('table.transferAmount')"
        width="120"
        >
      </el-table-column>
       <el-table-column
        prop="bankNumber"
        :label="$t('table.transferBankAccount')"
        
        >
      </el-table-column>
                  <el-table-column
        prop="bankCode"
        :label="$t('table.bankCode')">
      </el-table-column>
        <el-table-column
        prop="bankOrderNo"
        :label="$t('table.transferBankOrnum')"
        width="120"
        >
      </el-table-column>
       <el-table-column
        :label="$t('table.status')">
        <template>
            待发放
        </template>
      </el-table-column>
    </el-table>
        </div>
    <!-- 切换银行卡弹窗 -->
   <el-dialog
     :title="$t('adbuy.switchCard')"
     :visible.sync="Popcardswitch"
     width="70%"
     :before-close="handleClose"
     center>
          <el-table
      :data="mallbanklist"
      style="width: 100%"
      @row-click="chose"
      >
      <el-table-column
        prop="accountName"
        :label="$t('adbuy.accountname')"
        width="100">
      </el-table-column>
      <el-table-column
        prop="bankCode"
        :label="$t('adbuy.bankCode')"
        width="100">
      </el-table-column>
      <el-table-column
        prop="bankName"
        :label="$t('adbuy.bankname')">
      </el-table-column>
            <el-table-column
        prop="bankNumber"
        :label="$t('adbuy.payaccount')">
      </el-table-column>
       <el-table-column
        prop="bankNumber"
        :label="$t('adbuy.status')">
      <template slot-scope="scope">
        <el-button type="primary" size="small" round  v-if="scope.row.status">选用</el-button>
        <el-button type="danger" size="small" round  @click="activeBankCard(scope.row)" v-else>停用</el-button>
      </template>
      </el-table-column>
    </el-table>
   </el-dialog>

 </div>
</template>

<script>
import { getAdminUser,checkBankCard,agentBankCardlist,agentCoinAdd} from "../Util/request"
export default {
    data() {
        return {
          formLabelAlign: {
          bankType:null,
          amount: '',
          currency: '',
          bankOrderNo: ''
        },
        tableData:[
        ],
        mallId:"",
        useingBankCardinfo:{},
        mallbanklist:[],
        Popcardswitch:false,
        currencyOptions:[
          {
          value: 'USD',
          label: this.$t('money[0]')
        }, {
          value: 'HKD',
          label: this.$t('money[1]')
        }
        ],
        mallRealName:'',
        requestStatus:true
        }
    },
    created(){
        getAdminUser((res)=>{
        this.mallId=res.data.mallId
        this.mallRealName=res.data.nickName
        checkBankCard((res)=>{
          this.mallbanklist=res.data.list
          this.useingBankCardinfo=res.data.list[0]
        },{
          mallId:this.mallId
        })
      })
    },
    methods: {
      openSwitch(){ 
        this.Popcardswitch=true
      },
      handleClose(){
        this.Popcardswitch=false
      },
      activeBankCard(row){
        console.log(row);
          agentBankCardlist((res)=>{
              console.log(res);
          },{
            id:row.id,
            mallId:this.mallId
          })
      },
      resetForm(){
         this.formLabelAlign.amount=null
         this.formLabelAlign.currency=null
         this.formLabelAlign.bankOrderNo=null
        this.formLabelAlign.bankType=null
      },
      goRequest(){
        agentCoinAdd((res)=>{
            console.log(res);
            if(res.code==200){
              let i =res.data
              for (let u in i ) {
                if(u=="amount"){
                   i[u] = i[u]+i.currency
                }
               
                
              }
              this.tableData.unshift({...res.data})
              this.$message({
                message:this.$t('notic.resuc'),
                type:'success'
              })
              this.resetForm()
            }else{
           this.$message({
                message:res.message,
                type:'error'
              })
            }
        },{
          mallId:this.mallId,
          bankCardId:this.useingBankCardinfo.id,
          ...this.formLabelAlign
        })
      },
      chose(e){
        this.useingBankCardinfo=e
        this.Popcardswitch=false
      }
    },
    watch:{
      formLabelAlign:{
        deep:true,
        handler(n){
          for(let i  in n){
            if(i!=="bankOrderNo"){
                      if(!n[i]){
              this.requestStatus=true
              return
            }else{
              this.requestStatus=false
            }
            }
    
          }
        }
      }
    }
}
</script>

<style lang="less" scoped>
   .shadow{
         box-shadow: -8px -4px 19px #b7b7b7;
    }
.adbuy{
    width: 100%;
    height: 965px;
    .formcard{
        margin:  15px  0 0 15px ;
        width: 600px;
        height: 530px;
        overflow: hidden;
        .text{
            font-size: 12px;
        }
        /deep/.el-input{
            width: 180px;
        }
        /deep/.el-form-item__label{
            font-size: 12px;
        }
        /deep/.el-input{
          width: 240px;
        }
        .changeCard{
            display: inline-block;
            margin-left: 15px;
            font-size: 12px;
        }
    }
    .adBuyData{
        width: 100%;
        margin-top: 15px;
        height: 280px;
             /deep/ .titlecell{
            // background-color: red;
            padding: 0;
            .cell{
                text-align: center;
                padding: 0;
            }
        }

      /deep/  ::-webkit-scrollbar{
      height: 10px;
     
      }
        /deep/::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
      border-radius   : 10px;
      background-color: skyblue;
      background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
      );
        }
       /deep/::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #ededed;
        // border: 0;
       }
    }
  
}



</style>